<template>
	<view class="backg">
		<u-tabs width="250" :current="tabIndex" :list="list1" @click="click"></u-tabs>
		<view v-for="(item,index) in orderlist">
			<view class="orders">
				<!-- 1 -->
				<view class="meta-foot">
					<view class="">
						陪玩ID:{{item.playAccountId}}
					</view>
					<!-- <view class="ddbh">
					{{item.orderNo}}
				</view> -->
					<view style="color: red;" v-if="item.payState==0" class="waitPay">
						待付款
					</view>
					<view v-if="item.payState==1" class="waitPay">
						已付款
					</view>
				</view>
				<!-- 2 -->
				<view class="meta-foot detail">
					<view class="bigHead">
						<image class="head"
							src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.ws.126.net%2FjSY324Y6f%3DxkhYoppPK88pBIyJpf%3DHQO8iijl6mzM6pB41508317299861compressflag.jpg&refer=http%3A%2F%2Fdingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665801707&t=51697fa4c5114743846ef6e6ad35bbb0">
						</image>
					</view>
					<view class="time">
						<view class=" create">
							创建时间：{{item.createTime.split('T')[0]}}
						</view>
						订单时长：{{item.orderTime}}
					</view>
					<view class="">
						￥<span>{{item.payPrice}}</span>
					</view>
				</view>
				<!-- 3 -->
				<view class="meta-foot">
					<view class="cnacel" @click.stop="dialogToggle('warn',item.id)">
						取消订单
					</view>
					<view v-if="item.payState==0" class="goPay" @click="toggle('center',item.orderNo)">
						立即支付
					</view>
					<view v-if="item.payState==1" class="goPay">
						<view v-if="item.orderState==0" class="">
							订单未开始
						</view>
						<view v-if="item.orderState==1" class="">
							订单进行中
						</view>
						<view v-if="item.orderState==2" class="">
							订单已结束
						</view>
					</view>
				</view>
			</view>
		</view>














		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确定" title="提示" content="确定取消该订单？"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
		<!-- 立即支付弹窗 -->
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view class="nr">
						<text class="text">
						订单号：{{orderNo}}
						<view class="">
							记得备注哦！！
						</view>
						<image class="payMoney" src="../../static/微信二维码.jpg"></image>
						<view class="">
							微信号：63827whjks
						</view>
						</text>
					</view>
					
						</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderNo:null,
				type: 'center', // 立即支付弹框
				ceshi: [],
				id: null, // 删除订单的id
				tabIndex: 0,
				msgType: 'success',
				list1: [{
					name: '全部订单'
				}, {
					name: '待支付',
				}, {
					name: '已支付',
				}],
				orders: [],
				orderlist: [],
				totalPage: null,
				state: 0 //订单状态
			}
		},
		methods: {
			change(e) {
							console.log('当前模式：' + e.type + ',状态：' + e.show);
						},
			// 获取
			allOrder: async function() {
				let t = localStorage.getItem('ordertotal')
				const id = JSON.parse(localStorage.getItem('user')).id
				for (let i = 1; i <= t; i++) {
					const res = await this.$api.orderList({
						accountId: id,
						current: i
					})
					if (i == 1) {
						this.ceshi = res.data.records.reverse()
					} else {
						this.ceshi = this.ceshi.concat(res.data.records)
					}
				}
				console.log(this.ceshi)
				this.orderlist = this.ceshi
			},
			//根据id删除订单
			delOrder: async function(id) {
				const res = await this.$api.delOrder({
					id: id
				})
				console.log(res)
			},
			//获取订单列表
			// orderList:async function(current){
			// 	const id = JSON.parse(localStorage.getItem('user')).id
			// 	console.log(id)
			// 	const res = await this.$api.orderList({
			// 		accountId:id,
			// 		current
			// 	})
			// 	// console.log(res)
			// 	if(current==1){
			// 		this.orders=res.data.records
			// 	}else{
			// 		this.orders=this.orders.concat(res.data.records)
			// 	}
			// 	console.log(this.orders)
			// },
			//弹出对话框，是否取消订单
			dialogToggle(type, id) {
				this.msgType = type
				this.id = id
				this.$refs.alertDialog.open()
			},
			toggle(type,orderNo) {
				console.log(orderNo)
				this.orderNo=orderNo
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			// 确定取消订单
			dialogConfirm(id) {
				// console.log('确定取消')
				// console.log(this.id)
				this.delOrder(this.id)
				console.log(this.state)
				// location.reload()
				this.allOrder()
				this.filter(this.state)
			},
			// 不取消订单
			dialogClose() {
				// console.log('取消')
			},
			// 过滤已支付和待支付
			filter(stat) {
				this.state = stat
				if (this.state == 0) {
					this.orderlist = this.ceshi
				}
				if (this.state == 1) {
					this.orderlist = this.ceshi.filter((ite, index) => {
						return ite.payState + 1 == this.state
					})
				}
				if (this.state == 2) {
					this.orderlist = this.ceshi.filter((ite, index) => {
						return ite.payState + 1 == this.state
					})
				}
				// let arr = this.orders.filter((ite,index)=>{
				// 	return ite.payState==this.state
				// })
				// this.orderlist = arr
				// console.log(this.orderlist)
			},
			click(item) {
				console.log(item.index);
				this.state = item.index
				this.filter(item.index)
			},
			orderDetail() {
				uni.navigateTo({
					url: '../payDetail/payDetail'
				})
			}
		},
		onLoad() {
			// console.log('onload')
			// let pages=localStorage.getItem('ordertotal')
			// for(let i = 1;i<=pages;i++){
			// 	this.orderList(pages)

			// }
			this.allOrder()

		},
		onShow() {
			// console.log('onshow')
			// console.log(this.orders)
			// this.filter(0)
		}
	}
</script>

<style scoped>
	.backg {
		background-color: #ececec;
		/* height: 100vh; */
	}

	.meta-foot {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.orders {
		border-radius: 10rpx;
		margin: 12rpx;
		background-color: white;
		padding: 20rpx;
	}

	.head {
		width: 170rpx;
		height: 170rpx;
		border-radius: 15rpx;
	}

	.waitPay {
		color: rgb(47, 133, 252);
	}

	.detail {
		margin: 10rpx 0;
	}

	.cnacel {
		border: 1px solid grey;
		padding: 5rpx 20rpx;
		border-radius: 30rpx;
	}

	.goPay {
		border: 1px solid rgb(47, 133, 252);
		padding: 5rpx 20rpx;
		border-radius: 30rpx;
		color: rgb(47, 133, 252);
	}

	span {
		font-size: 49rpx;
	}

	.ddbh {
		white-space: nowrap;
	}

	.create {
		margin: 10rpx 0;
	}
	.popup-content {
			@include flex;
			align-items: center;
			justify-content: center;
			padding: 15px;
			height: 80%;
			background-color: #fff;
		}
		.popup-height {
				@include height;
				/* width: 500px; */
			}
		.text{
			/* color: red; */
			font-size: 35rpx;
		}
		.payMoney{
			width: 80%;
			margin: 10rpx auto;
		}
		.nr{
			text-align: center;
		}
</style>
